// >>>>> 描述列表对话框 <<<<<
.description_list_dialog {
    width: 40rem !important;

    .el-dialog__header {
        @apply pb-2;
    }

    // 标题
    &-title {
        @apply text-lg leading-6 font-medium text-gray-900;
    }

    // 子标题
    &-subtitle {
        @apply mt-1 max-w-2xl text-sm text-gray-500;
    }
}

// >>>>> 描述列表 <<<<<
.description_list {
    @apply divide-y divide-gray-200;

    // 子项
    &-item {
        @apply flex flex-wrap items-start py-3;

        // &:nth-child(odd) {
        //     @apply bg-gray-50;
        // }
    }

    // 术语
    &-term {
        @apply w-48 mr-4 font-medium text-gray-500;
    }

    // 定义元素
    &-definition {
        @apply w-0 flex-auto text-gray-900;
    }

    // 子列表
    &-sublist {
        @apply w-full mt-2 divide-y divide-gray-200;

        &-item {
            @apply flex items-start text-sm;

            &:nth-child(1) .description_list-sublist-block {
                @apply bg-gray-50 py-3 text-gray-500 text-left text-xs font-medium tracking-wider;
            }
        }

        &-block {
            flex-basis: auto;
            @apply p-4 flex-grow flex-shrink-0;
        }
    }

    // 直接子术语元素
    & > &-term {
        @apply w-auto mr-0 px-8 py-3;
    }

    // 直接子定义元素
    & > &-definition {
        @apply px-8 pb-3 pt-0;
    }

    // 表格
    &-table {
        @apply min-w-full;

        tbody {
            @apply divide-y divide-gray-200 border-t border-gray-200;
        }

        th,
        td {
            @apply align-top px-3;

            // // 序号
            // &:nth-child(1) {
            //     @apply w-12 text-center !important;
            // }
        }

        th {
            @apply bg-gray-50 py-3 text-gray-500 text-left text-xs font-medium tracking-wider;
        }

        td {
            @apply bg-white py-4;
        }
    }
}

// >>>>> 描述列表 <<<<<
.desc_list {
    // max-width: 48rem;

    // 描述列表顶部
    &-top {
        // @apply mb-4;
    }

    // 描述列表标题
    &-title {
        @apply text-lg leading-6 font-medium text-gray-900;
    }

    // 描述列表副标题
    &-subtitle {
        @apply text-sm text-gray-500;
    }

    // 描述列表内容
    &-content {
        @apply mt-4;
    }

    // 描述列表项
    &-item {
        @apply px-6 py-3 flex items-start flex-wrap;

        &:nth-child(odd) {
            @apply bg-gray-50;
        }

        // 描述列表术语
        & > dt {
            @apply w-1/3;

            & + :not(dd) {
                @apply w-full mt-3;
            }
        }

        // 描述列表描述
        & > dd {
            @apply w-2/3;
        }
    }

    // 描述列表下表格
    .el-table {
        @apply flex-auto mt-3 ring-1 ring-gray-300 rounded shadow;
    }
}
